﻿@using Lib.core;
@using Lib.helper;

@using Bll;
@using Model;
@{
    Layout = null;
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- header page -->
    @Html.Partial(IncludePath("header"))
</head>

<body>
    @Html.Partial(IncludePath("body_top"))
    @Html.Partial(IncludePath("manage_nav"))

    <div class="container-fluid">

        <div class="row">
            <div class="col-md-3">
                <div class="box center" style="line-height: 130px; font-weight: lighter; padding: 0;">
                    <div style="font-size: 80px">@(ViewData["c1"])</div>
                    <div style="background-color: #4caf50; color: white; font-size: 30px;">注册人数</div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="box center" style="line-height: 130px; font-weight: lighter; padding: 0;">
                    <div style="font-size: 80px">@(ViewData["c2"])</div>
                    <div style="background-color: #0d87e9; color: white; font-size: 30px;">文章数量</div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="box center" style="line-height: 130px; font-weight: lighter; padding: 0;">
                    <div style="font-size: 80px">@(ViewData["c3"])</div>
                    <div style="background-color: #e51c23; color: white; font-size: 30px;">产品数量</div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="box center" style="line-height: 130px; font-weight: lighter; padding: 0;">
                    <div style="font-size: 80px">@(ViewData["c4"])</div>
                    <div style="background-color: #9c27b0; color: white; font-size: 30px;">订单数量</div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    平均接口响应时长：@(ViewData["avgreqtime"])秒
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">用户组成</div>
                    <div class="panel-body">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="user_group_by_sex" style="height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">订单状态</div>
                    <div class="panel-body">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="order_group_by_state" style="height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">最近发帖量趋势</div>
                    <div class="panel-body">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="post_group_by_date" style="height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="~/ui/echarts/echarts.min.js"></script>

    <script type="text/javascript">
        var data = null;
        var option = null;
    </script>

    <script type="text/javascript">
        $(function () {
            data = [@(Html.Raw(ViewData["user_data"]))][0];
            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.legend_data
                },
                series: [
                    {
                        name: '用户性别',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: data.data
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echarts.init(document.getElementById('user_group_by_sex')).setOption(option);
        });
    </script>

    <script type="text/javascript">
        $(function () {
            data = [@(Html.Raw(ViewData["order_data"]))][0];
            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.legend_data
                },
                series: [
                    {
                        name: '订单状态',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: data.data
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echarts.init(document.getElementById('order_group_by_state')).setOption(option);
        });
    </script>

    <script type="text/javascript">
        $(function () {
            data = [@(Html.Raw(ViewData["post_data"]))][0];
            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.x
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当日发帖量',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: {} },
                        data: data.y
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            echarts.init(document.getElementById('post_group_by_date')).setOption(option);
        });
    </script>

    @Html.Partial(IncludePath("body_bottom"))
</body>
</html>

